<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <title>演示：使用HTML5实现刮刮卡效果</title>

    <style type="text/css">
        .demo{width:320px; margin:10px auto 20px auto; min-height:300px;}
        .msg{text-align:center; height:32px; line-height:32px; font-weight:bold; margin-top:50px}
    </style>
</head>

<body>


< id="main">
    <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-270.html">使用HTML5实现刮刮卡效果</a></h2>
    <div class="msg">刮开灰色部分看看，<a href="javascript:void(0)" onClick="window.location.reload()">再来一次</a></div>
    <div class="demo">
        <canvas></canvas>
    </div>
    <br/><br/>
</div>

<script type="text/javascript">
    var bodyStyle = document.body.style;
//
    bodyStyle.mozUserSelect = 'none';//
    bodyStyle.webkitUserSelect = 'none';

    var img = new Image();
    var canvas = document.querySelector('canvas');
    canvas.style.backgroundColor='transparent';
    canvas.style.position = 'absolute';
    var imgs = ['p_0.jpg','p_1.jpg'];
    var num = Math.floor(Math.random()*2);
    img.src = imgs[num];

    img.addEventListener('load', function(e) {
        var ctx;
        var w = img.width,
                h = img.height;
        var offsetX = canvas.offsetLeft,
                offsetY = canvas.offsetTop;
        var mousedown = false;

        function layer(ctx) {
            ctx.fillStyle = 'gray';
            ctx.fillRect(0, 0, w, h);
        }

        function eventDown(e){
            e.preventDefault();
            mousedown=true;
        }

        function eventUp(e){
            e.preventDefault();
            mousedown=false;
        }

        function eventMove(e){
            e.preventDefault();
            if(mousedown) {
                if(e.changedTouches)
                   {
                    e=e.changedTouches[e.changedTouches.length-1];
                }
                var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
                        y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
                with(ctx) {
                    beginPath()
                    arc(x, y, 10, 0, Math.PI * 2);
                    fill();
                }
            }
        }

        canvas.width=w;
        canvas.height=h;
        canvas.style.backgroundImage='url('+img.src+')';
        ctx=canvas.getContext('2d');
        ctx.fillStyle='#00ff00';

        ctx.fillText ('撒地方撒地方',canvas.width/2,canvas.height/2+10);

        ctx.fillStyle='transparent';
        ctx.fillRect(0, 0, w, h)

        //灰色;
        layer(ctx);

        ctx.globalCompositeOperation = 'destination-out';

        canvas.addEventListener('touchstart', eventDown);
        canvas.addEventListener('touchend', eventUp);
        canvas.addEventListener('touchmove', eventMove);
        canvas.addEventListener('mousedown', eventDown);
        canvas.addEventListener('mouseup', eventUp);
        canvas.addEventListener('mousemove', eventMove);
    });
</script>
<div id="footer">
    <p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>
<p id="stat"><script type="text/javascript" src="/js/tongji.js"></script></p>
</body>
</html>